<template>
  <div>
    <el-dialog title="发送快递" v-model="model" width="30%">
      <el-form ref="ruleForm" :rules="rules" :model="form" label-width="160px">
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="发货类型" prop="expressType">
              <el-segmented v-model="form.expressType" :options="options"/>
            </el-form-item>

          </el-col>
          <el-col :span="24">
            <el-form-item label="快递公司" prop="expressCode">
              <el-select style="width: 100%;" v-model="form.expressCode" filterable clearable
                         placeholder="请选择快递公司">
                <el-option v-for="item in expressOptions" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>

          </el-col>
          <el-col :span="24">
            <el-form-item label="快递单号" prop="waybillId">
              <el-input v-model="form.waybillId" name="waybillId" placeholder="请填写快递单号">
              </el-input>
            </el-form-item>

          </el-col>
        </el-row>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                  <el-button @click="model = false">取 消</el-button>
                  <el-button type="primary" @click="confirm">确 定</el-button>
                </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {ref} from "vue";
import {useData} from "@/utils/useData";
import {ElLoading, ElMessage} from "element-plus";
import http from "@/utils/request";

const emit = defineEmits(['success', 'submit'])
const params = defineProps({
  orderData: {
    type: Object,
    default: () => {
    }
  }
})

const ruleForm = ref(null);

const form = ref({
  expressType: "1",
  expressCode: null,
  waybillId:null
})
const rules = ref({
  waybillId: [
    {required: true, message: '请输入快递单号', trigger: 'blur'}
  ],
  expressCode: [
    {required: true, message: '请选择快递公司', trigger: 'blur'}
  ],
})

const options = ref([
  {label: '物流快递', value: '1'},
  {label: '同城配送', value: '2'},
  {label: '用户自提', value: '3'},
  {label: '虚拟发货', value: '4'},
])

const model = defineModel()

const confirm = async () => {

  try {
    let valid = await ruleForm.value.validate();
    if (!valid) {
      return;
    }
  } catch (e) {
    return;
  }
  const loading = ElLoading.service({
    lock: true,
    text: '数据处理中',
    background: 'rgba(0, 0, 0, 0.7)',
  })

  form.value.orderId = params.orderData.id;
  form.value.expressName = expressOptions.value.find(item => item.id === form.value.expressCode).name;
  let res = await http.post(`/express/send`, form.value);
  emit("success")
  loading.close();
  form.value.waybillId=null;
  if (res.code !== 200) {
    ElMessage.error(res.msg)
    return
  }

  model.value = false
}


const {listData: expressOptions} = useData("/express/listExpress")

</script>
<style scoped>

</style>
